<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    前端路由的基本概念：根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系
    前端路由主要做的事情就是监听事件并分发执行事件处理函数
-->
<div id="app">
    <a href="#/zhuye">主页</a>
    <a href="#/keji">科技</a>
    <component :is="conName"></component>
</div>
<script src="lib/vue.js"></script>
<script>
const zhuye = {
    template: `<h1>这是主页</h1>`
}
const keji = {
    template: `<h1>这是科技</h1>`
};
const app = new Vue({
    el:"#app",
    data:{
        conName:"zhuye"
    },
    components:{
        zhuye,
        keji,
    }
});
window.onhashchange=function () {
    console.info(location.hash);
    switch (location.hash.slice(1)) {
        case '/zhuye':
            app.conName = 'zhuye';
            break;
        case '/keji':
            app.conName = 'keji';
            break;
    }
}
</script>
</body>
</html>